<template>
  <div>
    <vxe-table :align="allAlign" :data="vxeTableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="姓名"></vxe-column>
      <vxe-column field="sex" title="性别"></vxe-column>
      <vxe-column field="age" title="年龄"></vxe-column>
      <vxe-column
        field="time"
        title="时间"
        :formatter="formatTime"
      ></vxe-column>
    </vxe-table>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-date-picker
                    v-model="logForm.date"
                    type="datetime"
                    style="width:200px"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    defaule-value="dafaultValue"
                  >
                  </el-date-picker>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02 09:54:21",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04 09:54:21",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01 09:54:21",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03 09:54:21",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      allAlign: null,
      vxeTableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc",
          time: "2024-2-23 09:49:23",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
          time: "2024-2-22 09:49:23",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
          time: "2024-2-21 09:49:23",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          age: 24,
          address: "Shanghai",
          time: "2024-2-20 09:49:23",
        },
      ],
    };
  },
  methods: {
    // el-table的去掉时分秒
    formatter(cellValue) {
      console.log(cellValue.date);
      if (cellValue.date) {
        return cellValue.date.split(" ")[0]; // 只保留日期部分，去掉时分秒
      }
      return "";
    },
    // vxe-table的去掉时分秒
    formatTime({ cellValue }) {
      console.log(cellValue);
      if (cellValue) {
        return cellValue.split(" ")[0]; // 只保留日期部分，去掉时分秒
      }
      return "";
    },
    Date(){
          const nowDate = new Date();
          const date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
            hours: nowDate.getHours(),
            minutes: nowDate.getMinutes(),
            seconds: nowDate.getSeconds()
          };
 
          const newmonth = date.month > 10 ? date.month : "0" + date.month;
          const newday = date.date > 10 ? date.date : "0" + date.date;
          const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
          const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
          const value =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;
 
          this.$set(this.logForm, "date", value);
 
}
  },
};
</script>